<!-- 词云图: https://github.com/ecomfe/echarts-wordcloud/tree/1.1.2 -->
<template>
  <div id="wordcloud"></div>
</template>

<script>
import 'echarts-wordcloud'

export default {
  data () {
    return {
    }
  },
  mounted () {
    const chart = this.$echarts.init(document.getElementById('wordcloud'))
    const fruitList = ['苹果', '香蕉', '樱桃', '枣子', '茄子', '无花果', '葡萄', '蜜瓜', '冰淇淋', '菠萝蜜']
    chart.setOption({
      series: [{
        type: 'wordCloud',
        data: [...new Array(50).keys()].map(item => ({
          name: fruitList[item % fruitList.length],
          value: Math.random() * 100
          // // Style of single text
          // textStyle: {
          //   normal: { },
          //   emphasis: {}
          // }
        })),
        shape: 'circle',
        // Global text style
        textStyle: {
          normal: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            // Color can be a callback function or a color string
            color: function () {
              // Random color
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')'
            }
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#333'
          }
        }
      }]
    })
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
#wordcloud {
  width: 100%;
  height: 100%;
}
</style>
